// 颜色渐变
/**** DEMO
.gradient(top,#f7e7b8,#b48605);
****/
.gradient-background(@origin; @startColor; @endColor){
    background-color:@startColor/2 + @endColor/2;
    background: -webkit-linear-gradient(@origin, @startColor, @endColor);
    background:-moz-linear-gradient(@origin, @startColor, @endColor);
    background: -ms-linear-gradient(@origin, @startColor, @endColor);
    background: linear-gradient(@origin, @startColor, @endColor);
}
.gradient(@origin: top; @startColor; @endColor) when(@origin=top){    
    filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startColor}', endColorstr='@{endColor}',gradientType=0)";
    .gradient-background(@origin; @startColor; @endColor);
}
.gradient(@origin: left; @startColor; @endColor) when(@origin=left){
    filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startColor}', endColorstr='@{endColor}',gradientType=1)";
    .gradient-background(@origin; @startColor; @endColor);
}


// 透明度渐变
/**** DEMO
当第一个参数为top时，最后一个参数为高度，为了兼容ie低版本；
当第一个参数为left时，最后一个参数为宽度；
.gradient-opacity(top,rgba(255, 0, 0, 0),rgba(255, 0, 0, 0.5),60);
****/
.gradient-opacity-background(@origin; @startColor; @endColor){
    @startAlpha: alpha(@startColor) * 100;
    @endAlpha: alpha(@endColor) * 100;
    @starthexColor: argb(@startColor);
    @endhexColor: argb(@endColor);
    background: -webkit-linear-gradient(@origin, @startColor, @endColor);
    background:-moz-linear-gradient(@origin, @startColor, @endColor);
    background: -ms-linear-gradient(@origin, @startColor, @endColor);
    background: linear-gradient(@origin, @startColor, @endColor);
}
.gradient-opacity(@origin: top; @startColor;@endColor;@height:50) when(@origin=top){
    .gradient-opacity-background(@origin; @startColor; @endColor);
    filter:~"alpha(opacity=@{startAlpha} finishopacity=@{endAlpha} style=1 startx=0,starty=0,finishx=0,finishy=@{height}) progid:DXImageTransform.Microsoft.gradient(startColorstr='@{starthexColor}', endColorstr='@{endhexColor}')";    
}
.gradient-opacity(@origin: left; @startColor;@endColor;@width:50) when(@origin=left){
    filter:~"alpha(opacity=@{startAlpha} finishopacity=@{endAlpha} style=1 startx=0,starty=0,finishx=@{width},finishy=0) progid:DXImageTransform.Microsoft.gradient(startColorstr='@{starthexColor}', endColorstr='@{endhexColor}')";
    .gradient-opacity-background(@origin; @startColor; @endColor);
}

// Gradients

.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
    .linear-gradient-top(@default,@start,0%,@stop,100%);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-left(@color1,@color2) {
    background-image: -webkit-linear-gradient(left, @color1, @color2);
    background-image: linear-gradient(left, @color1 , @color2);
}
